import React, { useEffect } from 'react';
import { Button, Form } from 'antd';
import classNames from 'classnames';
import { TjFormItem } from '../TjForm/TjFormItem';
import type { CSSProperties } from 'react';
import type { Argument } from 'classnames';
import type { FormInstance } from 'antd';
import type { ITjFormItemProps } from '../TjForm/TjFormItem';
import type { Store } from 'antd/lib/form/interface';
import { formUtils } from '../TjForm/helper';
import _ from 'lodash';
import './index.less';

const TjFilter: React.FC<ITjFilterProps> = (props) => {
  const [form] = props.form ? [props.form] : Form.useForm();

  const onSearch = () => {
    form.validateFields().then((res) => {
      props.onSearch && props.onSearch(res);
    });
  };

  const onReset = () => {
    if (props.defaultValues) {
      form.setFieldsValue(props.defaultValues);
    }
    props.onReset && props.onReset(props.defaultValues ? props.defaultValues : undefined);
  };

  const isShowBtn = (key: 'useResetBtn' | 'useSearchBtn') => {
    return _.isBoolean(props[key]) ? props[key] : true;
  };

  useEffect(() => {
    if (props.defaultValues && Object.keys(props.defaultValues).length > 0) {
      form.setFieldsValue(props.defaultValues);
    }
  }, [props.defaultValues]);

  return (
    <Form
      style={props.style}
      layout="inline"
      className={classNames('tj-filter', props.className)}
      form={form}
      initialValues={props.defaultValues ? props.defaultValues : undefined}
    >
      {props.items.length > 0 &&
        props.items.map((item, index) => {
          return <TjFormItem form={form} {...item} key={formUtils.getItemKey(item, index)} />;
        })}
      <div className="btns">
        {isShowBtn('useSearchBtn') && (
          <Button type="primary" onClick={onSearch} loading={props.loading}>
            查询
          </Button>
        )}
        {isShowBtn('useResetBtn') && (
          <Button onClick={onReset} loading={props.loading}>
            重置
          </Button>
        )}
      </div>
    </Form>
  );
};

interface ITjFilterProps {
  /**
   * 支持传入行内样式
   */
  style?: CSSProperties;
  /**
   * class
   * 不管传没传，都会有一个 `tj-filter` 的 className
   */
  className?: Argument;
  /**
   * 筛选项配置
   */
  items: ITjFormItemProps[];
  /**
   * 表单是
   */
  form?: FormInstance | null;
  /**
   * 按钮的loading
   */
  loading?: boolean;
  /**
   * 查询事件
   */
  onSearch?: (values: Store) => void;
  /**
   * 重置事件
   */
  onReset?: (values?: Store) => void;
  /**
   *  默认值，初始化设置后点击重置会在将表单值设置为该对象
   */
  defaultValues?: Store;
  /**
   * 是否使用重置按钮 默认是true
   */
  useResetBtn?: boolean;
  /**
   * 是否使用搜索按钮 默认是true
   */
  useSearchBtn?: boolean;
}

export { TjFilter };
